<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<form action="" method="">
				<!-- 1、当行文本 -->
				用户名:<input type="text" v-model="user.username" /><br />
				
				<!-- 2、多行文本 -->
				信息:<textarea v-model="user.info"></textarea><br>
				
				<!-- 3、单选框 -->
				性别:<input type="radio" value="nan" name="gender" v-model="user.gender" >男
				<input type="radio" value="nv" name="gender" v-model="user.gender">女
				
				<!-- 4、多选框 -->
				爱好：<input type="checkbox" value="lanqiu" v-model="user.aihao" />篮球
				<input type="checkbox" value="zuqiu" v-model="user.aihao" />足球
				<input type="checkbox" value="yumaoqiu" v-model="user.aihao" />羽毛球
				
				<!-- 5、下拉框 -->
				省份：
				<select name="shengfen" v-model="user.shengfen">
					<option value="henan">河南</option>
					<option value="hebei">河北</option>
					<option value="wuhan">武汉</option>
				</select>
				
				
				
				<input type="button" value="提交" v-on:click="fun1()"/>
			</form>
			
			
		</div>
		
		<script src="../js/vuejs-2.5.16.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			const vue = new Vue({
				el: "#app",
				data: {
					user:{
						username:"",
						info:"",
						gender:"nan",
						aihao:[],
						shengfen:"henan"
					}
				},
				methods:{
					fun1:function(){
						alert("单行文本:"+this.user.username);
						alert("多行文本:"+this.user.info);
						alert("性别:"+this.user.gender);
						alert("爱好:"+this.user.aihao);
						alert("省份:"+this.user.shengfen);
					}
				}
			})
		</script>
		
	</body>
</html>
